<template>
  <div class="depart-container">
    <el-card>
      <!-- 标题 -->
      <el-row>
        <el-col :span="20">江苏传智播客教育科技股份有限公司</el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">负责人</el-col>
            <el-col :span="12">
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    @click.native="addDep('')"
                  >添加部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 标题 -->
      <!-- 列表 -->
      <el-tree
        :data="tableData"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <template v-slot="{ data }">
          <el-row>
            <el-col :span="20">{{ data.name }}</el-col>
            <el-col :span="4">
              <el-row>
                <el-col :span="12">负责人</el-col>
                <el-col :span="12">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <!-- 加native的原因：
                        因为在自定义组件上注册的事件触发的是组件自定义的事件，根本不是原生的dom事件
                        在封装的组件中，使用点击事件时必须应用native点击才可以生效 -->
                        <el-dropdown-item
                          @click.native="addDep(data.id)"
                        >添加部门</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="editDia(data)"
                        >编辑部门</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="delDep(data.id)"
                        >删除部门</el-dropdown-item>
                      </el-dropdown-item></el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
      <!-- 列表 -->
    </el-card>

    <!-- 添加部门对话框 -->
    <el-dialog
      :title="isEdit ? '编辑部门' : '添加部门'"
      :visible.sync="dialogFormVisible"
    >
      <!-- depDia组件 -->
      <depDia
        v-if="dialogFormVisible"
        :pid="pid"
        :row="row"
        :dialog-form-visible.sync="dialogFormVisible"
        :is-edit="isEdit"
        @handleDia="handleDia"
      />
    </el-dialog>
    <!-- 添加部门对话框 -->
  </div>
</template>

<script>
import { getDepart, delDepartment } from '@/api/department'
import { toDo, toDo2 } from '@/utils/'
// 导入新建的depDia组件
import depDia from '@/views/departments/components/depDia.vue'

// array-to-tree第三方包实现属性数据处理
export default {
  components: {
    depDia
  },
  data() {
    return {
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      /* 添加部门对话框 */
      dialogFormVisible: false,
      pid: '',
      isEdit: false,
      row: {}
    }
  },

  created() {
    this.getData()
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data)
    },
    getData() {
      getDepart().then((res) => {
        // console.log(res)
        // this.tableData = toDo(res.data.depts)
        this.tableData = toDo2(res.data.depts)
      })
    },
    // 点击添加部门按钮
    addDep(id) {
      /* 步骤分析：
      1-点击添加部门按钮
      2-显示对话框
      3-对话框中表单布局
      4-表单校验
      5-收集表单数据  v-model
      6-【取消】关闭对话框+清空表单
      7-【确认】关闭对话框+清空表单
        7-1 封装api接口函数
        7-2 调用api接口函数
        7-3 成功后需要刷新页面
        7-展示部门负责人
      8-【确认】关闭对话框+清空表单
        8-0 兜底校验
        8-1 封装api接口函数
        8-2 调用api接口函数
        8-3 成功后需要刷新页面
         9-添加非一级
        获取点击当前行的id
      */

      // console.log(this.form)
      this.dialogFormVisible = true
      // console.log(id)
      // 9-添加非一级
      // this.form.pid = id    //此处pid被抽取到depDia组件里，故代码注销
      this.pid = id
      this.isEdit = false
    },
    // 编辑部门
    editDia(row) {
      // console.log(row, 666)
      this.dialogFormVisible = true
      this.isEdit = true
      this.row = row
      this.pid = row.pid // 给子部门注册pid
    },
    /* 删除部门 */
    delDep(id) {
      /*
      步骤分析：
      1-给按钮绑定点击事件
      2-显示弹出窗
      3-点击取消===关闭对话框===不用写
      4-点击确认按钮
        4-1 ===获取点击当前行的id
        4-2 ===封装api接口函数
        4-3 ===调用接口函数
        4-4 ===关闭对话框 ===不用写
        4-5 刷新页面
      */
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 点击的是确认按钮
          // alert(id);
          await delDepartment(id)
          // 刷新页面
          this.getDepart()
          // 成功的提示
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          // 点击的是取消按钮
        })
    },
    /* 子向父传值 */
    handleDia() {
      // 相当于点击的取消按钮  cancel函数  关闭对话框+刷新页面
      this.dialogFormVisible = false
      /* 刷新页面  成功后需要刷新页面 */
      this.getData()
    }
    /*
      步骤分析：
      1-点击编辑按钮显示对话框=====跟添加的对话框共用一个
      2-显示表单数据
        2-1 需要做标记  isEdit:false
        2-2 点击编辑按钮  isEdit：true,添加按钮 isEdit:false
        2-3 需要将isEdit 传到子组件对话框中
        2-4 子组件对话框 根据 isEdit===true 表单需要显示数据，否则不显示数据
          2-4-1 需要在父组件中获取当前点击行的数据,并传给子组件对话框
          2-4-2 子组件：根据isEdit===true=>将传过来的数据赋值给form表单对象
      3-显示对话框标题
      4-点击对话框确认按钮
        需要将isEdit：true ===发生修改的请求
        isEdit：false ===发生添加的请求
      */
  }
}
</script>
<style lang="scss" scoped>
/*
穿透
less /deep/
scss ::v-deep
*/
.depart-container {
  padding: 20px;
  ::v-deep .el-card__body {
    padding: 80px;
  }
  .el-row {
    width: 100%;
  }
}
</style>
